<template>
  <div class="container">
    <div class="department">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="聘用形式">
          <el-checkbox-group v-model="form.HireForm">
            <el-checkbox label="1" name="type">正式</el-checkbox>
            <el-checkbox label="2" name="type">非正式</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="员工状态">
          <el-checkbox-group v-model="form.StateEmployees">
            <el-checkbox label="1" name="type">在职</el-checkbox>
            <el-checkbox label="2" name="type">离职</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="部门">
          <el-checkbox-group v-model="form.department">
            <el-checkbox
              v-for="item in departmentList"
              :key="item.id"
              :label="item.id"
              name="type"
            >
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-table
        :data="salaryList.rows"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="index"
          label="序号"
          width="80"
        />
        <el-table-column
          prop="username"
          label="姓名"
          width="120"
        />
        <el-table-column
          prop="mobile"
          label="手机"
          width="120"
        />
        <el-table-column
          prop="workNumber"
          label="工号"
          width="120"
        />
        <el-table-column
          prop="formOfEmployment"
          label="聘用形式"
          width="60"
        />
        <el-table-column
          prop="departmentName"
          label="部门"
          width="120"
        />
        <el-table-column
          prop="timeDfEntry"
          label="入职时间"
          width="120"
        />
        <el-table-column
          prop="currentBasicSalary"
          label="工资基数"
          width="120"
        />
        <el-table-column
          prop="inServiceStatus"
          label="津贴方案"
          width="120"
        />
        <el-table-column
          label="操作"
          width="150"
        >
          <template slot-scope="scope">
            <el-button
              size="small"
              class="btn-salary"
              @click="handleClick(scope.row.id, scope.row.departmentName, scope.row.timeDfEntry)"
            >
              调薪
            </el-button>
            <el-button type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        title="调薪"
        width="50%"
        :visible.sync="dialogTableVisible"
      >
        <div class="pop-up-box">
          <div class="avatar">
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
          </div>
          <div class="division-management">
            <div>部门: {{ departmentNameFa }}</div>
            <div>入职时间: {{ timeOfEntryFa }}</div>
          </div>
        </div>

        <div class="demo-input-suffix">
          属性方式：
          <el-input
            size="mini"
            placeholder="请输入内容"
            :disabled="true"
          />
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'Salary',
  data() {
    return {
      form: {
        HireForm: [],
        StateEmployees: [],
        department: []
      },
      currentPage: 1,
      dialogTableVisible: false,
      departmentNameFa: '',
      timeOfEntryFa: ''
    }
  },
  watch: {
    form: {
      deep: true,
      handler(newValue) {
        console.log(newValue)
      }
    }

  },
  created() {
    this.updateDepartmentList()
    this.updateSalaryList({
      ...this.form,
      page: this.currentPage
    })
  },
  computed: {
    ...mapState('department', [
      'departmentList'
    ]),
    ...mapState('salary', [
      'salaryList'
    ]),
    ...mapState('modify', [
      'modifyList'
    ])
  },
  methods: {
    ...mapActions('department', [
      'updateDepartmentList'
    ]),
    ...mapActions('salary', [
      'updateSalaryList'
    ]),
    ...mapActions('modify', [
      'updateModifyList'
    ]),
    handleClick(id, departmentName, timeDfEntry) {
      this.departmentNameFa = departmentName
      this.timeOfEntryFa = timeDfEntry
      this.updateModifyList(id)
      this.dialogTableVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
$blue: #409eff;
$white: white;
.container {
  padding: 16px;
}

.btn-salary {
  background-color: $blue;
  color: $white;
}

.department {
  border: 1px solid #ebeef5;
  margin-bottom: 12px;
}

.pop-up-box {
  // margin: 0 16px;
  display: flex;
  border-bottom: 1px solid #d5d5d5;

  .avatar {
    height: 80px;
  }

  .division-management {
    margin-left: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
}

::v-deep .el-input__inner {
  width: 100px;
}
</style>
